{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* 基本样式 */
      body {
        font-family: Arial, sans-serif;
      }

     .form-inline {
        display: inline-block;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }

      th {
        background-color: #f2f2f2;
      }

      table th:nth-of-type(3),
      table td:nth-of-type(3) {
        width: 10%;
      }

      @media print {
        /* 设置较小的页面边距 */
        @page {
          margin: 0.5cm;
        }

        /* 清除所有元素的背景和边框 */
        body * {
          background: none !important;
          border: none !important;
          box-shadow: none !important;
          text-shadow: none !important;
        }

        /* 保持内容的显示，不隐藏header, footer, nav, form */
        header,
        footer,
        nav,
        form {
          display: block;
        }

        /* 调整表格和单元格的字体大小 */
        table,
        th,
        td {
          font-size: smaller; /* 减小字体大小 */
          border: none !important; /* 清除表格和单元格的边框 */
        }

        table th:nth-of-type(2),table td:nth-of-type(2) {
        width: 10%;
        }

        /* 隐藏除了特定列之外的所有列 */
        td:not(:nth-of-type(3)):not(:nth-of-type(4)):not(:nth-of-type(5)):not(:nth-of-type(6)):not(:nth-of-type(9)):not(:nth-of-type(10)):not(:nth-of-type(11)) {
          display: none;
        }

        /* 将特定列的显示设置为block，使其单独成行 */
        td {
          display: block;
        }

        /* 选择第10行的特定td元素 */
        td:nth-child(10) {
          display: inline-block;
        }

        /* 选择第11行的特定td元素 */
        td:nth-child(11) {
          display: inline-block;
        }

        /* 如果需要，可以取消分页规则 */
        tr:nth-child(1n) {
          page-break-before: always; /* 一条数据一页 */
        }

        /* 其他打印样式规则 */
        /* 隐藏不需要打印的部分 */
        header,
        footer,
        nav,
        form,
        thead {
          display: none;
        }
      }
    </style>
    <title>打印数据</title>
  </head>

  <body>
    <!-- 导航 -->
    <header>
      <nav>
        <button id="printButton">点击我打印</button>
        <button id="backButton">返回首页</button>
        <form method="post" action="{% url 'filter_by_date' %}">
          {% csrf_token %}
          <span>检验日期:</span>
          <input type="date" id="date" name="date" />
          <input type="submit" value="提交" />
        </form>

        <form class="form-inline" method="get" action="{% url 'index' %}">
          {% csrf_token %}
          <span>批号:</span>
          <button type="submit" name="order" value="asc" {% if order == 'asc' %}class="active"{% endif %}>从小到大</button>
          <button type="submit" name="order" value="desc" {% if order == 'desc' %}class="active"{% endif %}>从大到小</button>
        </form>

        <form class="form-inline" method="post" action="{% url 'filter_by_batch' %}">
          {% csrf_token %}
          <select name="批号">
              <option value="">请选择批号</option>
              {% for batch in distinct_batches %}
              <option value="{{ batch }}">{{ batch }}</option>
              {% endfor %}
          </select>
          <input type="submit" value="提交">
      </form>

      </nav>
    </header>
    <table>
      <thead>
        <tr>
          <th>选择</th>
          <th>检验单号</th>
          <th>检验日期</th>
          <th>存货编码</th>
          <th>存货名称</th>
          <th>规格型号</th>
          <th>品牌</th>
          <th>供应商编码</th>
          <th>供应商名称</th>
          <th>批号</th>
          <th>生产日期</th>
          <th>合格数量</th>
          <th>不良数量</th>
        </tr>
      </thead>
      <tbody>
        {% for data in datas %}
        <tr>
          <td>
            <input
              type="checkbox"
              name="selected_rows"
              value="{{ data.检验单号 }}"
            />
          </td>
          <td>{{data.检验单号}}</td>
          <td>{{data.检验日期}}</td>
          <td>{{data.存货编码}}</td>
          <td>{{data.存货名称}}</td>
          <td>{{data.规格型号}}</td>
          <td>{{data.品牌}}</td>
          <td>{{data.供应商编码}}</td>
          <td>{{data.供应商名称}}</td>
          <td>{{data.批号}}</td>
          <td>{{data.生产日期}}</td>
          <td>{{data.合格数量}}</td>
          <td>{{data.不良数量}}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <!-- 尾部 -->
    <footer>
      <button id="confirmButton">确认</button>
    </footer>
    <script>
      // 等待DOM加载完毕
      document.addEventListener("DOMContentLoaded", function () {
        // 获取打印按钮元素
        var printButton = document.getElementById("printButton");

        // 为打印按钮添加点击事件监听器
        printButton.addEventListener("click", function () {
          // 直接调用window.print()方法来触发打印对话框
          window.print();
        });

        // 获取返回按钮元素
        var backButton = document.getElementById("backButton");

        // 获取所有表单元素
        var forms = document.querySelectorAll("form");

        // 为每个表单添加提交事件监听器
        forms.forEach(function (form) {
          form.addEventListener("submit", function (event) {
            // // 阻止表单默认提交行为
            // event.preventDefault();

            // 隐藏所有表单
            forms.forEach(function (f) {
              f.style.display = "none";
            });

            // // 显示返回按钮
            // backButton.style.display = 'block';
          });
        });

        // 为返回按钮添加点击事件监听器
        backButton.addEventListener("click", function () {
          // 隐藏返回按钮
          backButton.style.display = "none";

          // 显示所有表单
          forms.forEach(function (f) {
            f.style.display = "block";
          });

          // 跳转到首页
          window.location.href = "http://127.0.0.1:8000/";
        });

        // 获取确认按钮元素
        var confirmButton = document.getElementById("confirmButton");

        // 为确认按钮添加点击事件监听器
        confirmButton.addEventListener("click", function () {
          // 创建一个数组来存储选中的数据对象
          var selectedDataArray = [];
          // 获取所有复选框
          var checkboxes = document.querySelectorAll(
            'input[name="selected_rows"]'
          );
          // 获取所有数据行
          var rows = document.querySelectorAll("tbody tr");

          checkboxes.forEach(function (checkbox) {
            if (checkbox.checked) {
              // 根据检验单号找到对应的数据行
              var 检验单号 = checkbox.value;
              var dataRow = Array.from(rows).find(
                (row) => row.cells[1].textContent === 检验单号
              );
              if (dataRow) {
                // 构建数据对象
                var dataObj = {
                  检验单号: dataRow.cells[1].textContent,
                  检验日期: dataRow.cells[2].textContent,
                  存货编码: dataRow.cells[3].textContent,
                  存货名称: dataRow.cells[4].textContent,
                  规格型号: dataRow.cells[5].textContent,
                  品牌: dataRow.cells[6].textContent,
                  供应商编码: dataRow.cells[7].textContent,
                  供应商名称: dataRow.cells[8].textContent,
                  批号: dataRow.cells[9].textContent,
                  生产日期: dataRow.cells[10].textContent,
                  合格数量: dataRow.cells[11].textContent,
                  不良数量: dataRow.cells[12].textContent,
                };
                // 将数据对象添加到数组中
                selectedDataArray.push(dataObj);
              }
            }
          });

          // 如果没有选中任何行，则不执行任何操作或给出提示
          if (selectedDataArray.length === 0) {
            alert("请选择至少一行数据。");
            return;
          }

          // 创建新表格并替换原表格
          var newTable = createNewTable(selectedDataArray);
          var oldTable = document.querySelector("table");
          oldTable.parentNode.replaceChild(newTable, oldTable);
        });

        // 创建新表格的函数
        function createNewTable(data) {
          // 创建表格
          var table = document.createElement("table");
          table.innerHTML = `
                <thead>
                    <tr>
                        <th>检验单号</th>
                        <th>检验日期</th>
                        <th>存货编码</th>
                        <th>存货名称</th>
                        <th>规格型号</th>
                        <th>品牌</th>
                        <th>供应商编码</th>
                        <th>供应商名称</th>
                        <th>批号</th>
                        <th>生产日期</th>
                        <th>合格数量</th>
                        <th>不良数量</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 表格数据行将在这里动态添加 -->
                </tbody>
            `;

          // 填充表格数据
          data.forEach(function (row) {
            var tr = table.querySelector("tbody").insertRow();
            Object.values(row).forEach(function (cellData) {
              var td = tr.insertCell();
              td.textContent = cellData;

            });
          });

          return table;
        }
      });
    </script>
  </body>
</html>
